<template>
  <div class="page">
    <div class="page__top">
      <span
        >购物车(<em>{{ goodsAllNum }}</em
        >)</span
      >
      <p class="siz">管理</p>
    </div>
    <van-empty description="这里什么都没有" v-if="!isLogin">
      <van-button round type="primary" class="bottom-button" to="/login">去登录</van-button>
    </van-empty>
    <div class="page__container" v-if="isLogin">
      <GoodsItem
        ref="goodsRef"
        @update:change="change"
        :isCheckAll="isCheckAll"
        :isIndeterminate="isIndeterminate"
      />
    </div>

    <div class="page__footer" v-if="isLogin">
      <van-submit-bar :safe-area-inset-bottom="false" :price="selectGoodsAllPre" button-text="提交订单">
        <van-checkbox v-model="isCheckAll" :indeterminate="isIndeterminate" @change="checkAllChange"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script lang="ts" setup>
import GoodsItem from './commponent/index.vue'
import { ref, watch, onMounted,computed } from 'vue'

// 是否全选
const isCheckAll = ref(false)
// 半选状态
const isIndeterminate = ref(false)

const goodsRef = ref<any>(null)

const data = ref()

const isLogin = ref<boolean>(false)


// 拿到暴漏的数据
watch(
  () => goodsRef.value?.dataList,
  (newVal) => {
    data.value = newVal
  }
)

// 商品总数量
interface ListItem {
  allNum: number;
}
const goodsAllNum = computed(() => {
  const list = data.value
  const newList = list?.map((item: ListItem) => item.allNum)
  const sum = newList?.reduce((prev: number, item: number) => prev + item, 0);
  return sum
})

const checked = ref([])

// 操控单选
function change(value: string[], checkedResult: any) {
  checked.value = checkedResult
  const checkedCount = value.length
  const dataLength = data.value.length

  // 全选按钮状态 取决数组长度
  isCheckAll.value = checkedCount === dataLength && checkedCount > 0
  // 半选
  isIndeterminate.value = checkedCount > 0 && checkedCount < dataLength
  return {
    checkedResult
  }
}

// 全选
const checkAllChange = (val: boolean) => {
  if (!val) return
  goodsRef.value?.allChange()
  isIndeterminate.value = false
}
watch(
  () => isCheckAll.value,
  () => {
    goodsRef.value?.allChange()
    isIndeterminate.value = false
  }
)

// 选中的商品价格
interface newListItem {
  goodsPrice: number;
  allNum:number
}
const selectGoodsAllPre = computed(() => {
  const list = ref()
  list.value = checked.value
  const newList = list.value.value as newListItem[]
  const tmp = newList?.map((item: newListItem) => item.goodsPrice * item.allNum)
  const pre = tmp?.reduce((prev: number, item: number) => prev + item, 0);
  return pre !== undefined ? pre * 100 : 0;
})

//判断是否登录
onMounted(() => {
  const userDataInfo: any = window.localStorage.getItem('token')
  console.log('userDataInfo', userDataInfo)

  if (userDataInfo) {
    isLogin.value = true
   }
  }
)

</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  &__top {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    span {
      font-weight: bolder;
      display: block;
      margin: auto;
      padding-left: 18px;
      box-sizing: border-box;
    }

    .siz {
      position: absolute;
      right: 0;
      top: 0;
      height: 50px;
      width: 50px;
      margin: auto;
      padding: 16px 9px;
      margin-bottom: 0;
      box-sizing: border-box;
      cursor: pointer;
    }
  }

  &__container {
    flex: 1;
    overflow-y: auto;
  }

  &__footer {
    padding-top: 50px;
    box-sizing: border-box;
  }

  .van-submit-bar {
    background-color: #f9dfdf;
    position: fixed;
    bottom: 50px;
    left: 0;
  }
  .bottom-button {
    width: 160px;
    height: 40px;
  }
}
</style>
